<template>
  <div class="goodsList">
    <div class="search">
      <van-search
        v-model="value"
        @search="onSearch(value)"
        placeholder="搜索商品信息"
        shape="round"
        @input="onCancel"
      />
      <button class="l1" v-if="str" @click="changeModel"></button>
      <button class="l2" v-if="!str" @click="changeModel"></button>
    </div>
    <div class="btnList">
      <button v-if="$route.query.title && keyword == ''">
        <router-link to="/category">{{ $route.query.title }}</router-link>
      </button>
      <button v-if="keyword != ''">
        <router-link to="/category">{{ keyword }}</router-link>
      </button>
      <button class="pri" @click="pri">
        价格
        <img
          v-if="prishow == 1"
          src=""
          alt=""
        />
        <img
          v-if="prishow == 2"
          src=""
          alt=""
        />

        <img
          v-if="prishow == 3"
          src=""
          alt=""
        />
      </button>
      <button class="num" @click="num">
        销量
        <img
          v-if="numshow == 1"
          src=""
          alt=""
        />
        <img
          v-if="numshow == 2"
          src=""
          alt=""
        />
        <img
          v-if="numshow == 3"
          src=""
          alt=""
        />
      </button>
      <button @click="newGoods" :class="newG ? 'new' : ''">新品</button>
    </div>

    <ul class="goods" v-if="!str && goodList.length == 0">
      <li v-for="l in sidList" :key="l.id">
        <router-link :to="`/detail/${l.id}`">
          <van-image fit="cover" :src="l.image" />
          <p>{{ l.store_name }}</p>
          <span class="pri">￥{{ l.price }}</span>
          <div class="vippri">
            <p>
              <span class="vip"
                ><span class="pri">￥{{ l.vip_price }}</span>
                <img class="img" src="../assets/vip.png" alt=""
              /></span>
              <span class="num">已售{{ l.sales }}件</span>
            </p>
          </div>
        </router-link>
      </li>
    </ul>

    <ul class="goods" v-if="!str && goodList.length > 0">
      <li v-for="l in goodList" :key="l.id">
        <router-link :to="`/detail/${l.id}`">
          <van-image fit="cover" :src="l.image" />
          <p>{{ l.store_name }}</p>
          <span class="pri">￥{{ l.price }}</span>
          <div class="vippri">
            <p>
              <span class="vip"
                ><span class="pri">￥{{ l.vip_price }}</span>
                <img class="img" src="../assets/vip.png" alt=""
              /></span>
              <span class="num">已售{{ l.sales }}件</span>
            </p>
          </div>
        </router-link>
      </li>
    </ul>

    <ul class="bastgood" v-if="str && goodList.length == 0">
      <li v-for="i in sidList" :key="i.id">
        <div class="content">
          <!--大盒子 -->
          <router-link class="aa" :to="`/detail/${i.id}`">
            <van-image class="img" fit="cover" :src="i.image" alt="" />
          </router-link>
          <div class="right">
            <p class="text">{{ i.store_name }}</p>
            <p class="num">￥{{ i.price }}</p>
            <div class="vip">
              <span class="price">￥{{ i.vip_price }}</span>
              <img src="../assets/vip.png" alt="" />
              <span class="number">已售{{ i.sales }}{{ i.unit_name }}</span>
            </div>

            <router-link :to="`/detail/${i.id}`">
              <div class="cart"></div>
            </router-link>
          </div>
        </div>
      </li>
    </ul>

    <ul class="bastgood" v-if="str && goodList.length > 0">
      <li v-for="i in goodList" :key="i.id">
        <div class="content">
          <!--大盒子 -->
          <router-link class="aa" :to="`/detail/${i.id}`">
            <van-image class="img" fit="cover" :src="i.image" alt="" />
          </router-link>
          <div class="right">
            <p class="text">{{ i.store_name }}</p>
            <p class="num">￥{{ i.price }}</p>
            <div class="vip">
              <span class="price">￥{{ i.vip_price }}</span>
              <img src="../assets/vip.png" alt="" />
              <span class="number">已售{{ i.sales }}{{ i.unit_name }}</span>
            </div>

            <router-link :to="`/detail/${i.id}`">
              <div class="cart"></div>
            </router-link>
          </div>
        </div>
      </li>
    </ul>

    <div v-if="goodList.length == 0">
      <van-image src="http://47.115.51.185/h5/img/noGood.7aec7edd.png" alt="" />
      <ForYou :item="tuijianList" />
    </div>
  </div>
</template>

<script>
import ForYou from "@/components/ForYou";
export default {
  data() {
    return {
      sidList: [],
      goodList: [],
      value: "",
      str: false,
      keyword: "",
      newG: false,
      prishow: 1,
      numshow: 1,
      tuijianList: []
    };
  },
  created() {
    this.$axios.get("/api/products?sid=" + this.$route.query.uid).then(d => {
      console.log(d.data.data);
      this.sidList = d.data.data;
    });
    this.$axios.get("/api/product/hot?page=1&limit=20").then(d => {
      this.tuijianList = d.data.data;
    });
  },
  components: { ForYou },
  methods: {
    paixu(x) {
      if (this.prishow == 2 || this.numshow == 2) {
        return function(a, b) {
          var value1 = a[x];
          var value2 = b[x];
          return value1 - value2;
        };
      } else if (this.prishow == 3 || this.numshow == 3) {
        return function(a, b) {
          var value1 = a[x];
          var value2 = b[x];
          return value2 - value1;
        };
      }
    },
    pri() {
      ++this.prishow;
      this.numshow = 1;
      if (this.prishow > 3) {
        this.prishow = 1;
      }
      if (this.prishow == 1) {
        if (this.value == "" || this.value == " ") {
          this.$axios
            .get("/api/products?sid=" + this.$route.query.uid)
            .then(d => {
              this.sidList = d.data.data;
            });
        } else if (this.value != "" || this.value != " ") {
          this.$axios
            .get("/api/products?page=1&limit=20&keyword=" + this.value)
            .then(d => {
              this.goodList = d.data.data;
            });
        }
      } else {
        if (this.value == "" || this.value == " ") {
          this.sidList = this.sidList.sort(this.paixu("price"));
        } else if (this.value != "" || this.value != " ") {
          this.goodList = this.goodList.sort(this.paixu("price"));
        }
      }
    },
    num() {
      ++this.numshow;
      this.prishow = 1;
      if (this.numshow > 3) {
        this.numshow = 1;
      }

      if (this.numshow == 1) {
        if (this.value == "" || this.value == " ") {
          this.$axios
            .get("/api/products?sid=" + this.$route.query.uid)
            .then(d => {
              this.sidList = d.data.data;
            });
        } else if (this.value != "" || this.value != " ") {
          this.$axios
            .get("/api/products?page=1&limit=20&keyword=" + this.value)
            .then(d => {
              this.goodList = d.data.data;
            });
        }
      } else {
        if (this.value == "" || this.value == " ") {
          this.sidList = this.sidList.sort(this.paixu("sales"));
        } else if (this.value != "" || this.value != " ") {
          this.goodList = this.goodList.sort(this.paixu("sales"));
        }
      }
    },
    newGoods() {
      this.newG = !this.newG;
    },
    onSearch(val) {
      this.numshow = 1;
      this.prishow = 1;
      this.$axios
        .get("/api/products?page=1&limit=20&keyword=" + val)
        .then(d => {
          this.goodList = d.data.data;
          console.log(d.data.data);
        });
      this.keyword = val;
    },
    onCancel() {
      this.prishow = 1;
      this.numshow = 1;
      if (this.value == "" || this.value == " ") {
        this.goodList = [];
        this.keyword = "";
      }
    },
    changeModel() {
      this.str = !this.str;
    }
  }
};
</script>

<style lang="less" scoped>
.new {
  color: rgb(233, 51, 35);
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  li {
    width: 47.2%;
    background: white;
    margin: 5px;
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
    a {
      color: rgb(31, 31, 31);
      text-decoration: none;
      .van-image {
        height: 5rem;
      }
      p {
        text-align: left;
        font-size: 0.4rem;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .pri {
        display: block;
        text-align: left;
        font-size: 0.45rem;
        font-weight: bold;
        color: rgb(233, 51, 35);
      }
      .vippri {
        p {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          .vip {
            display: inline-block;
            width: 100%;
            flex: 1;
            margin: 5px 0;
            .pri {
              color: rgb(40, 40, 40);
              font-size: 0.4rem;
              font-weight: bold;
              display: inline-block;
              margin-right: 0.1rem;
            }
            .img {
              width: 0.7rem;
            }
          }
          .num {
            display: block;
            padding-top: 5px;
            padding-right: 5px;
            font-size: 0.25rem;
            margin: 5px 0;
            color: rgb(170, 170, 170);
          }
        }
      }
    }
  }
}
.btnList {
  width: 100%;
  height: 1rem;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .pri {
    img {
      width: 10px;
    }
  }
  .num {
    img {
      width: 10px;
    }
  }
  button {
    border: none;
    background: white;
    cursor: pointer;
    font-size: 0.35rem;
    &:first-of-type {
      a {
        color: rgb(252, 65, 65);
        text-decoration: none;
      }
    }
  }
}
.search {
  width: 100%;
  height: 1.2rem;
  background: rgb(233, 51, 35);
  display: flex;
  justify-content: space-around;
  align-items: center;
  .van-search {
    width: 90%;
    background: rgb(233, 51, 35);
    height: 0.4rem;
  }
  button {
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.4rem;
    background: rgb(233, 51, 35);
    border: none;
    &.l1 {
      background: url(../assets/list1.png);
      background-size: 100%;
    }
    &.l2 {
      background: url(../assets/list2.png);
      background-size: 100%;
    }
  }
}

.aa {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bastgood {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  li {
    width: 100%;
    margin: 10px 0;
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
    .content {
      display: flex;
      width: 100%;
      height: 100%;
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid rgb(238, 238, 238);
        position: relative;
        .cart {
          position: absolute;
          width: 0.7rem;
          height: 0.7rem;
          right: 0.1rem;
          bottom: 0.1rem;
          margin-right: 0.2rem;
          border: 1px solid tomato;
          border-radius: 50%;
          overflow: hidden;

          a {
            display: inline-block;
            width: 100%;
            height: 100%;
          }

          &::before {
            content: "";
            position: absolute;
            width: 0.4rem;
            height: 0.4rem;
            background: url(../assets/cart.png);
            background-size: 100%;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }
        }
        .text {
          color: #222;
          font-size: 0.5rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          margin: 5px 0;
          text-align: left;
        }
        .num {
          text-align: left;
          font-weight: bolder;
          color: #fc4141;
          font-size: 0.5rem;
          margin-top: 0.7rem;
        }
        .vip {
          text-align: left;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          margin: 0.1rem;
          .price {
            color: #282828;
            font-size: 0.5rem;
            margin-right: 0.15rem;
          }
          img {
            width: 0.8rem;
            height: auto;
          }
          .number {
            color: #aaa;
            margin-left: 0.15rem;
            overflow: hidden;
            font-size: 0.4rem;
          }
        }
      }
      .img {
        width: 3rem;
        height: 3rem;
        border-radius: 5px;
        margin-right: 5vw;
      }
    }
  }
}
</style>
